<template>
  <div>
    <!-- <v-toolbar flat color="white" style="color: #999; border: 1px solid #E9E9E9">
      共搜索到 {{history.length}} 条历史数据
      <v-layout align-start justify-center column fill-height style="boredr: 1px solid #E9E9E9">
        <div style="color: #666;">
          <a name="tableHistory"></a>
          共搜索到 {{ history.length }} 条历史数据
        </div>
        <div>
          {{ moment(start).format("YYYY-MM-DD HH:mm") }} -
          {{ moment(end).format("YYYY-MM-DD HH:mm") }} &nbsp; | &nbsp; 区域：{{
          zone
          }}
        </div>
      </v-layout>
    </v-toolbar>-->

    <v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th style="white-space : nowrap !important" class="text-left">时间</th>
            <th style="white-space : nowrap !important" class="text-left">记步数</th>
            <th style="white-space : nowrap !important" class="text-left">目标温度（℃）</th>
            <th style="white-space : nowrap !important" class="text-left">环境温度（℃）</th>
            <th style="white-space : nowrap !important" class="text-left">电池电量</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in paginationHistory" :key="item.t">
            <td
              style="white-space : nowrap !important"
            >{{ moment(item.t).format("YYYY-MM-DD HH:mm:ss") }}</td>
            <td
              style="white-space : nowrap !important"
              class="text-xs-left"
            >{{ item.stepCount || "--" }}</td>
            <td
              style="white-space : nowrap !important"
              class="text-xs-left"
            >{{ item.targetTemp || "--" }}</td>
            <td
              style="white-space : nowrap !important"
              class="text-xs-left"
            >{{ item.envTemp || "--" }}</td>
            <td style="white-space : nowrap !important" class="text-xs-left">{{ item.vol || "--" }}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>

    <v-layout mb-3 mt-2 mx-3 align-center justify-center row fill-height wrap>
      <v-flex xs12 sm6 md5 lg4>
        <v-pagination color="#71AF65" v-model="page" :length="pageLength" :total-visible="7"></v-pagination>
      </v-flex>

      <v-flex xs5 sm2 md1 lg1 ml-1 style="height: 30px;" :class="{'mt-5': equipment === false}">
        <v-layout
          align-center
          justify-end
          row
          fill-height
          style="border: 1px solid #E9E9E9; border-radius: 5px; width: 90%; height: 30px;"
        >
          <v-menu offset-y>
            <template v-slot:activator="{ on, click }">
              <v-flex xs12 v-on="on" @click="pageNumClick()">
                <v-layout px-2 align-center justify-space-between row fill-height>
                  <div style="padding-left: 16px;">{{ page_num }}&nbsp; 条/页</div>
                  <div style="text-align: right;">
                    <span class="iconfont iconwebicon216" v-if="page_num_state"></span>
                    <span class="iconfont iconwebicon215" v-else></span>
                  </div>
                </v-layout>
              </v-flex>
            </template>
            <v-list>
              <v-list-item
                v-for="(item, index) in pageArr"
                :key="index"
                @click="changePageClick(item)"
              >
                <v-list-item-content>
                  <v-list-item-title>{{ item }} &nbsp; 条/页</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-layout>
      </v-flex>

      <v-flex xs5 sm4 md3 lg2 ml-1 :class="{'mt-5': equipment === false}">
        <v-layout align-center justify-start row fill-height wrap>
          <div>
            <span style="color: #666666; font-size: 14px;">跳至</span>
          </div>
          <div
            style="border: 1px solid #E9E9E9; border-radius: 5px; width: 50px; height: 30px; margin: 0px 10px;"
          >
            <input
              type="text"
              v-model="page"
              style="width: 50px; height: 30px; color: #666666; font-size: 14px;"
            />
          </div>
          <div>
            <span style="color: #666666; font-size: 14px;">页</span>
          </div>
        </v-layout>
      </v-flex>
    </v-layout>

    <!-- <v-layout mb-3 mt-2 mx-3 align-center justify-center row fill-height wrap>
      <v-pagination color="#71AF65" v-model="page" :length="pageLength" :total-visible="7"></v-pagination>
      <v-flex xs5 md1 style="height: 30px;">
        <v-layout
          xs5
          md1
          align-center
          justify-center
          row
          fill-height
          style="border: 1px solid #E9E9E9; border-radius: 5px; width: 80px; height: 30px;"
        >
          <select
            @click="pageNumClick()"
            style="color: #666666; font-size: 14px; height: 30px"
            v-model="page_num"
          >
            <option value="5">5 条/页</option>
            <option value="10">10 条/页</option>
            <option value="15">15 条/页</option>
            <option value="20">20 条/页</option>
          </select>
          <v-icon v-if="page_num_state">keyboard_arrow_down</v-icon>
          <v-icon v-else>keyboard_arrow_up</v-icon>
        </v-layout>
      </v-flex>
      <span style="color: #666666; font-size: 14px;">跳至</span>
      <div
        style="border: 1px solid #E9E9E9; border-radius: 5px; width: 50px; height: 30px; margin: 0px 10px;"
      >
        <input
          type="text"
          v-model="page"
          style="width: 50px; height: 30px; color: #666666; font-size: 14px;"
        />
      </div>
      <span style="color: #666666; font-size: 14px;">页</span>
    </v-layout>-->
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "TablePage",

  props: {
    zone: {
      type: String,
      default: function() {
        return "耳标";
      }
    },
    history: {
      type: Array,
      default: function() {
        return [];
      }
    },
    start: {
      type: Number,
      default: function() {
        return new Date().getTime() - 10 * 60 * 60 * 1000;
      }
    },
    end: {
      type: Number,
      default: new Date().getTime()
    },
    equipment: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      // 表头内容
      headers: [
        {
          text: "时间",
          align: "center",
          sortable: false,
          value: "t"
        },
        {
          text: "记步数",
          align: "center",
          sortable: false,
          value: "stepCount"
        },
        {
          text: "目标温度（℃）",
          align: "center",
          sortable: false,
          value: "targetTemp"
        },
        {
          text: "环境温度（℃）",
          align: "center",
          sortable: false,
          value: "envTemp"
        },
        {
          text: "电池电量",
          align: "center",
          sortable: false,
          value: "vol"
        }
      ],
      desserts: [],
      page: 1,
      page_num: 10,
      page_num_state: true,
      pageArr: [5, 10, 12, 20],
      moment: moment
    };
  },

  created() {
    this.page = 1;
  },

  watch: {
    page(val) {
      if (Number(val) > this.pageLength) {
        this.page = this.pageLength;
      } else if (Number(val) === 0 && this.pageLength > 0) {
        this.page = 1;
      } else {
        this.page = Number(val);
      }
    }
  },

  computed: {
    historyData() {
      // console.log("------->table: ", Array.isArray(this.history));
      return this.history;
    },

    pageLength() {
      return Math.ceil(this.historyData.length / Number(this.page_num));
    },

    paginationHistory() {
      let num = Number(this.page) * Number(this.page_num);
      return this.historyData.slice(num - Number(this.page_num), num);
    }
  },

  methods: {
    pageNumClick() {
      this.page_num_state = !this.page_num_state;
    },

    changePageClick(item) {
      this.page_num = item;
    }
  }
};
</script>

<style>
</style>
